<template>
  <div style="margin-top: 20px; margin: 50px; margin-right: 100px">
    <!-- 按钮 -->

 <!--    <el-row>
      <el-button
        style="float: right"
        type="primary"
        @click="dialogFormVisible = true; dept={}"
        >+ 新增部门</el-button
      >
    </el-row> -->
    <br>
    <!-- 数据表格 -->
    <template>
      <el-table
        highlight-current-row
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        border
      >
        <el-table-column type="index" width="100" label="序号" header-align="center" align="center"> </el-table-column>
        <el-table-column prop="id" label="离职编号" header-align="center" align="center"></el-table-column>
        <el-table-column prop="empId" label="员工号" header-align="center" align="center"></el-table-column>
        <el-table-column prop="empName" label="姓名" header-align="center" align="center"></el-table-column>
       <el-table-column align="center" label="性别" width="60">
          <template slot-scope="scope">
            <span style="margin-right: 10px">
            {{scope.row.empGender == "1" ? "男" : "女"}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="empIdcard" label="身份证号" header-align="center" align="center"></el-table-column>
        <el-table-column prop="empDeptname" label="部门" header-align="center" align="center"></el-table-column>
        <el-table-column prop="empJobname" label="职位" header-align="center" align="center"></el-table-column>
            <el-table-column align="center" label="离职时间">
          <template slot-scope="scope">
            {{scope.row.date ? scope.row.date.replace('T',' '):''}}
          </template>
        </el-table-column>

      </el-table>
    </template>
  </div>
</template>

<script>
import { findAll, add, update, deleteById, selectById } from "@/api/empout.js";

export default {
  data() {
    return {
      formLabelWidth: "120px",
      dialogFormVisible: false, //控制对话框是否可见
      empout: {
        id: "",
        empId:"",

      },
      tableData: [],
    };
  },

  methods: {

    //删除部门
    deleteById(id) {
      this.$confirm("确认删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
          deleteById(id).then((result) => {
          	if(result.data.code == 1){
	          	this.$message({
	              message: "恭喜你，删除成功",
	              type: "success",
	            });
	        }else{
	        	this.$message.error(result.data.msg);
	        }
            //重新查询数据
            this.init();
          });
        }).catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },

    //根据ID查询部门 -- 回显
    selectById(id) {
      this.dialogFormVisible = true;
      selectById(id).then((result) => {
        this.dept = result.data.data;
      });
    },

    //保存方法
    add() {
      let method ;// 添加
      if (this.dept.id) {
        method = update(this.dept); // 修改
      }else{
        method = add(this.dept); //添加
      }
      method.then((result) => {
        if (result.data.code == 1) {
          //修改成功
          this.$message.success("恭喜你，保存成功");
          //重新查询数据
          this.init();
        } else {
          this.$message.error(result.data.msg);
        }
      });
      // 关闭新建窗口
      this.dialogFormVisible = false;

      // 清空模型数据
      this.dept = {};
    },

    //初始化 - 查询全部
    init() {
      findAll().then((result) => {
        console.log(result);
        if (result.data.code == 1) {
          this.tableData = result.data.data;
        }
      });
    },
  },
  mounted() {
    //当页面加载完成后自动执行。
    this.init();
  },
};
</script>
<style>

</style>
